<template>
  <div class="personal-account">
    <h1 style="font-size: 23px;">个人账户</h1>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 账户信息展示表格 -->
    <h1 class="small-title">账户信息</h1>
    <el-descriptions :column="1" size="default" border>
      <el-descriptions-item label="账户ID" label-align="center" align="center">
        {{ userAccount.account.accountId }}
      </el-descriptions-item>
      <el-descriptions-item label="账户余额" label-align="center" align="center">
        {{ userAccount.account.balance.toFixed(2) }}
      </el-descriptions-item>
      <el-descriptions-item label="账户状态" label-align="center" align="center">
        <el-tag type="success" v-if="userAccount.account.status === 1">正常</el-tag>
        <el-tag type="danger" v-else-if="userAccount.account.status === 2">已注销</el-tag>
        <el-tag type="warning" v-else>异常</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <h1 class="small-title">流水信息</h1>

    <el-tabs v-model="activeName" class="demo-tabs">

      <el-tab-pane label="近一周" name="week">
        <!-- 明细 -->
        <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
          入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[0].toFixed(2) }}</span>
          元&emsp;&emsp;
          支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[1].toFixed(2) }}</span>
          元&emsp;&emsp;
          纯利润：<span style="font-size: 23px; color: #2e64c2;">
            {{ (incomeAndExpend[0] - incomeAndExpend[1]).toFixed(2) }}
          </span>
          元
        </h1>
        <!-- 表格 -->
        <el-table v-loading="loading" :data="weekBillList" style="width: 100% ;margin-top: 15px;">
          <el-table-column type="expand">
            <template #default="props">
              <!-- <el-table-column label="流水类型" prop="billType" width="90" /> -->
              <p class="expand-info">流水时间：{{ props.row.billTime }}</p>
              <p class="expand-info">订单备注：{{ props.row.moreInfo }}</p>
            </template>
          </el-table-column>
          <el-table-column label="流水ID" prop="billId" width="220" />
          <el-table-column label="转出方ID" prop="sendAccountId" width="220" />
          <el-table-column label="转入方ID" prop="receiveAccountId" width="220" />
          <el-table-column label="交易金额 / 元" prop="billAmount">
            <template v-slot="scope">
              {{ scope.row.billAmount.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="week_config.total" class="pager mt-4"
          @current-change="weekChangePage" :page-size="week_config.size" />
      </el-tab-pane>

      <el-tab-pane label="近一月" name="month">
        <!-- 明细 -->
        <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
          入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[2].toFixed(2) }}</span>
          元&emsp;&emsp;
          支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[3].toFixed(2) }}</span>
          元&emsp;&emsp;
          纯利润：<span style="font-size: 23px; color: #2e64c2;">
            {{ (incomeAndExpend[2] - incomeAndExpend[3]).toFixed(2) }}
          </span>
          元
        </h1>
        <!-- 表格 -->
        <el-table v-loading="loading" :data="monthBillList" style="width: 100% ;margin-top: 15px;">
          <el-table-column type="expand">
            <template #default="props">
              <!-- <el-table-column label="流水类型" prop="billType" width="90" /> -->
              <p class="expand-info">流水时间：{{ props.row.billTime }}</p>
              <p class="expand-info">订单备注：{{ props.row.moreInfo }}</p>
            </template>
          </el-table-column>
          <el-table-column label="流水ID" prop="billId" width="220" />
          <el-table-column label="转出方ID" prop="sendAccountId" width="220" />
          <el-table-column label="转入方ID" prop="receiveAccountId" width="220" />
          <el-table-column label="交易金额 / 元" prop="billAmount">
            <template v-slot="scope">
              {{ scope.row.billAmount.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="month_config.total" class="pager mt-4"
          @current-change="monthChangePage" :page-size="month_config.size" />
      </el-tab-pane>

      <!-- 所有流水 -->
      <el-tab-pane label="所有流水" name="all">
        <!-- 明细 -->
        <h1 style="font-size: 15px; margin-top: 10px; margin-left: 10px;">
          入账：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[4].toFixed(2) }}</span>
          元&emsp;&emsp;
          支出：<span style="font-size: 23px; color: #2e64c2;">{{ incomeAndExpend[5].toFixed(2) }}</span>
          元&emsp;&emsp;
          纯利润：<span style="font-size: 23px; color: #2e64c2;">
            {{ (incomeAndExpend[4] - incomeAndExpend[5]).toFixed(2) }}
          </span>
          元
        </h1>
        <!-- 表格 -->
        <el-table v-loading="loading" :data="allBillList" style="width: 100% ;margin-top: 15px;">
          <el-table-column type="expand">
            <template #default="props">
              <!-- <el-table-column label="流水类型" prop="billType" width="90" /> -->
              <p class="expand-info">流水时间：{{ props.row.billTime }}</p>
              <p class="expand-info">订单备注：{{ props.row.moreInfo }}</p>
            </template>
          </el-table-column>
          <el-table-column label="流水ID" prop="billId" width="220" />
          <el-table-column label="转出方ID" prop="sendAccountId" width="220" />
          <el-table-column label="转入方ID" prop="receiveAccountId" width="220" />
          <el-table-column label="交易金额 / 元" prop="billAmount">
            <template v-slot="scope">
              {{ scope.row.billAmount.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="all_config.total" class="pager mt-4"
          @current-change="allChangePage" :page-size="all_config.size" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>
<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const { proxy } = getCurrentInstance()
const userAccount = reactive({
  account: {
    "accountId": "",
    "balance": 0,
    "status": 0
  }
});
// 控制表格加载遮罩窗是否出现
const loading = ref(false);
const allBillList = ref([]);
const weekBillList = ref([]);
const monthBillList = ref([]);
const activeName = ref('week');
const incomeAndExpend = ref([0.0, 0.0, 0.0, 0.0, 0.0, 0.0]);
const all_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const week_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});
const month_config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
});

/**
 * 获取个人账户信息
 * @param {string} userId 用户ID
 */
const getMyUserAccount = async (userId) => {
  let res = await proxy.$api.account.getPersonalAccount({
    userId: userId
  });
  userAccount.account = res.data;
}

/**
 * 所有流水-翻页操作
 * @param {number} page 目标页码
 */
const allChangePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  all_config.current = page;
  await flowAll();
  loading.value = false;
}

/**
 * 近一周流水-翻页操作
 * @param {number} page 目标页码
 */
const weekChangePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  week_config.current = page;
  await flowOfWeek();
  loading.value = false;
}

/**
 * 近一月流水-翻页操作
 * @param {number} page 目标页码
 */
const monthChangePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  month_config.current = page;
  await flowOfMonth();
  loading.value = false;
}

/**
 * 获取用户的所有流水
 */
const flowAll = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfPersonalBill({ current: all_config.current, size: all_config.size });
  // 更新表格数据
  allBillList.value = res.data.billList;
  all_config.total = res.data.total;
}

/**
 * 获取用户的近一周流水
 */
const flowOfWeek = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfPersonalWeekBill({ current: week_config.current, size: week_config.size });
  // 更新表格数据
  weekBillList.value = res.data.billList;
  week_config.total = res.data.total;
}

/**
 * 获取用户的近一月流水
 */
const flowOfMonth = async () => {
  // 发起请求
  let res = await proxy.$api.bill.getPageOfPersonalMonthBill({ current: month_config.current, size: month_config.size });
  // 更新表格数据
  monthBillList.value = res.data.billList;
  month_config.total = res.data.total;
}

/**
 * 获取当前页面需要的所有入账和支出
 */
const getAllIncomeAndExpend = async () => {
  for (let i = 0; i <= 2; ++i) {
    let ret = await proxy.$api.bill.personalAccountStatistics(i);
    incomeAndExpend.value[i * 2] = ret.data.income;
    incomeAndExpend.value[i * 2 + 1] = ret.data.expend;
  }
}

onMounted(async () => {
  loading.value = true;
  await getMyUserAccount(store.state.user.userId);
  await getAllIncomeAndExpend();
  await flowAll();
  await flowOfWeek();
  await flowOfMonth();
  loading.value = false;
})
</script>

<style lang="less" scoped>
.personal-account {
  background: linear-gradient(180deg, #ecf0f5ee 0%, #ffffffea 100%);
  padding: 30px;
  border-radius: 10px;

  /* 分割线 */

  .el-divider {
    border-top: 2px solid rgba(170, 165, 165, 0.651);
  }

  .small-title {
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 30px;
  }

  .expand-info {
    margin-left: 60px;
    line-height: 30px;
    font-size: 15px;
  }

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>